<template>
	<el-col :span="24" class="header_container">
		<el-col :span="4" :offset="5" class="logo">
			<div id="logoImage" @click="backhome"></div>
		</el-col>
  		<el-col :span="10" class="tools">
  			<router-link to="/" class="back_home">返回官网</router-link>
  			<el-tooltip :content="'自动刷新'" placement="bottom" class="auto_refresh_switch">
  				<el-switch v-model="refresh_flag" active-color="#1DB2BF" @change="refresh"></el-switch>
  			</el-tooltip>
  			<span id="auto_refresh_title"> 自动刷新 </span>
  		</el-col>
	</el-col>
</template>

<script>
	//利用不同组件间共同的js文件进行传值
	import herderjs from "../utils/header.js"

	export default {

		//当前组件定义的变量
		data() {
			return {
				refresh_flag: true,
				val: 0,
				timer: null
			}
		},

		//组件挂载时调用
		mounted () {
			// herderjs.$emit('refresh_flag',this.refresh_flag)
			//创建定时器
			this.timer = setInterval(() => {
				//向herderjs中传值
				// herderjs.$on('val', (data) => {
					// console.log(data)
					if (this.val === 0) {
						herderjs.$emit('val',this.val)
						this.val += 1
					}
			    // })
			},1000)
			herderjs.$on('val', (data) => {
				// console.log(data)
				if (data === 3) {
					this.val = 0
				}
			})
		},

		//组件销毁时调用
		destroyed () {
			//情况定时器
			clearInterval(this.timer)
		},

		//当前组件中定义的方法
		methods: {
			//refresh函数用于实现页面中的自动刷新控制
			refresh() {
				herderjs.$emit('refresh_flag',this.refresh_flag)
				if(this.refresh_flag===false) {
					clearInterval(this.timer)
				} else {
					this.val = 0
					this.timer = setInterval(() => {
						//向herderjs中传值
						// herderjs.$on('val', (data) => {
						// 	console.log(data)
						// 	if (data===0) {
							if (this.val === 0) {
								herderjs.$emit('val',this.val)
								this.val += 1
							}
							// }
					  //   })
					},1000)
				}
			},
			//backhome函数为重定义路由回主页
			backhome () {
				this.$router.push(`/`)
			}
		}
	};
</script>

<style scoped>

	.header_container {
		background-color: rgb(255, 255, 255);
		height: 10.2%;
		box-shadow: 0 2px 4px 0 rgba(179,179,179,0.50);
	}

	.logo {
		height: 100%;
		background-color: rgb(255, 255, 255);
	}

	#logoImage {
		cursor: pointer;
		width: 74%;
		height: 60%;
		background-image:url('../assets/logo.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -9.5%;
	}

	.tools{
		height: 100%;
		background-color: rgb(255, 255, 255);
		/*width: 50%;*/
	}

	#auto_refresh_title {
		font-size: 0.94vw;
		/*font-size: 18px;*/
		float: right;
		margin-right: 1.2%;
		color: rgb(0,0,0);
		text-decoration:none;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -0.64vw;
        font-family: SourceHanSansCN-Normal;
        letter-spacing: 0;
	}

	.auto_refresh_switch {
		float: right;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -10px;
		margin-right: 3%;
		cursor: pointer;
	}

	.back_home {
		/*font-size: 19px;*/
		font-size: 1vw;
		float: right;
		/*margin-right: 1%;*/
		cursor: pointer;
		color: rgb(0,0,0);
		text-decoration:none;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -0.7vw;
        font-family: SourceHanSansCN-Normal;
        letter-spacing: 0;
	}

	.back_home:hover {
		color: #1DB2BF;
		transition: .2s;
	}

</style>